<template>
  <div class="comment">
    <van-field
      ref="messageRef"
      class="comment-box"
      v-model="message"
      rows="2"
      autosize
      label="发表评论"
      type="textarea"
      maxlength="50"
      placeholder="请输入bb的内容"
      show-word-limit
    />
    <van-button
      type="primary"
      class="comment-post"
      block
      @click="postComment"
    >发表评论</van-button>

    <div class="comment-list">
      <van-card
        title="商品标题"
        v-for="(comment,index) in comments"
        :key="index"
      >
        <template #thumb>
          <div>
            <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
            <div>
              {{comment.user_name}}
            </div>
          </div>
        </template>
        <template #title>
          <van-rate
            v-model="comment.rate"
            readonly
          />
        </template>
        <template #desc>
          <div class="desc">
            {{comment.content}}
          </div>
        </template>
        <template #price>
          {{comment.add_time}}
        </template>
      </van-card>
    </div>
    <van-loading
      v-if="isLoading"
      size="24px"
      vertical
    >加载中...</van-loading>
    <button
      v-else
      class="more"
      @click="getMore"
      :disabled="hasMore"
    >{{moreText}}</button>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  props: ['id'],
  data() {
    return {
      message: '',
      page: 0,
      pageSize: 20,
      comments: [],
      hasMore: false,
      isLoading: false
    }
  },
  methods: {
    async getComments() {
      // 节流
      if (this.hasMore !== false) return
      ++this.page
      const res = await this.$http.getComments({ id: this.id, page: this.page, pageSize: this.pageSize })
      // 上一页和下一页的数据拼接成一个新的数组
      this.comments = this.comments.concat(res.data.message)
      // 计算临界点
      this.hasMore = this.page * this.pageSize > res.data.count
    },
    getMore() {
      this.isLoading = true
      setTimeout(() => {
        this.getComments()
        this.isLoading = false
      }, 1500)
    },
    async postComment() {
      if (this.message === '') return
      await this.$http.postComment(this.id, this.message)
      this.comments.unshift({
        user_name: '匿名用户',
        add_time: moment().format('YYYY-MM-DD HH:mm:ss'),
        content: this.message,
        rate: 5
      })

      this.message = ''
      this.$refs.messageRef.focus()
    }
  },
  created() {
    this.getComments()
  },
  computed: {
    // 计算页面的显示效果
    moreText() {
      return this.hasMore ? '我也是有底线的' : '加载更多'
    }
  }
}
</script>
<style lang="scss" scoped>
.comment {
  margin-top: 10px;
  .comment-box {
    border: 1px solid #eee;
  }
  .comment-post {
    margin: 10px 0;
  }
  .van-icon {
    font-size: 60px;
  }
  .desc {
    margin-top: 15px;
  }
  .more {
    background-color: #fff;
    outline: none;
    border: none;
    line-height: 30px;
    font-size: 12px;
    color: #969799;
    text-align: center;
    width: 100%;
  }
}
</style>